import { computed, ref, watch } from "vue";
import { cloneDeep } from "lodash-es";

export const sliderProps = {
  table: {
    type: Object,
    default: () => {}
  },
  min: {
    type: Number,
    default: 1
  },
  max: {
    type: Number,
    default: 10
  },
  // 单位
  unit: {
    type: String,
    default: ""
  },
  value: {
    type: Object,
    default: () => {}
  }
};

export const sliderEmit = ["change", "update:value"];

export function useMatrixSlider(props: any, emit: any) {
  const dataValue = ref<any>({});

  const initValue = (value: any) => {
    let cloneValue = cloneDeep(value);
    if (value) {
      dataValue.value = cloneValue;
    } else {
      dataValue.value = {};
    }
  };

  watch(
    () => props.table,
    () => {
      initValue(props.value);
    },
    { immediate: true, deep: true }
  );

  watch(
    () => props.value,
    val => {
      initValue(val);
    },
    { immediate: true, deep: true }
  );

  const handleChange = () => {
    emit("change", dataValue.value);
    emit("update:value", dataValue.value);
  };

  const getTableRows = computed(() => {
    return props.table.rows;
  });

  return {
    dataValue,
    handleChange,
    getTableRows
  };
}
